﻿<template>
	<view class="margin-10">
		<u-grid :border="false" align="left" :col="asData.parameters.style"
			v-if="asData.parameters.style == '2' ||asData.parameters.style == '3' ||asData.parameters.style == '4'">
			<u-grid-item bg-color="transparent" v-for="(item, index) in asData.parameters.list" :key="index"
				:custom-style="{padding:asData.parameters.margin+'px'}">
				<image :src="item.image" mode="widthFix" @click="showSliderInfo(item.linkType, item.linkValue)"
					style="width: 100%;"></image>
			</u-grid-item>
		</u-grid>
		<view class="flex align-center flex-direction-row justify-between mainWindow"
			v-if="asData.parameters.style == '0'">
			<view class="left" :style="{paddingRight:asData.parameters.margin+'px'}">
				<u--image :src="asData.parameters.list[0].image" height="200px" width="100%"
					v-if="asData.parameters.list[0]"
					@click="showSliderInfo(asData.parameters.list[0].linkType, asData.parameters.list[0].linkValue)"></u--image>
			</view>
			<view class="right" :style="{paddingLeft:asData.parameters.margin+'px'}">
				<view>
					<u--image :src="asData.parameters.list[1].image" height="120px" width="100%"
						v-if="asData.parameters.list[1]"
						@click="showSliderInfo(asData.parameters.list[1].linkType, asData.parameters.list[1].linkValue)"></u--image>
				</view>
				<view class="flex align-center flex-direction-row justify-between"
					:style="{marginTop:asData.parameters.margin +'px'}">
					<view :style="{paddingRight:asData.parameters.margin / 2+'px'}" class="minBox">
						<u--image :src="asData.parameters.list[2].image"
							:height="(200-120-asData.parameters.margin)+'px'" width="100%"
							v-if="asData.parameters.list[2]"
							@click="showSliderInfo(asData.parameters.list[2].linkType, asData.parameters.list[2].linkValue)"></u--image>
					</view>
					<view :style="{paddingLeft:asData.parameters.margin / 2+'px'}" class="minBox">
						<u--image :src="asData.parameters.list[3].image"
							:height="(200-120-asData.parameters.margin)+'px'" width="100%"
							v-if="asData.parameters.list[3]"
							@click="showSliderInfo(asData.parameters.list[3].linkType, asData.parameters.list[3].linkValue)"></u--image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ImgWindow",
		props: {
			asData: {
				// type: Object,
				required: true,
			}
		},
		data() {
			return {
				height: 0
			}
		},
		onLoad() {},
		methods: {}
	}
</script>
<style lang="scss" scoped>
	.mainWindow {
		width: 100%;
		height: 200px;

		.left {
			width: 50%;
			height: 200px;
		}

		.right {
			width: 50%;
			height: 200px;
		}

		.minBox {
			width: 50%;
		}
	}
</style>